<template>
    <div class="tmap-dialog">
        <el-dialog
                title="点击地图以获取经纬度"
                :visible.sync="showTmapDialog"
                 width="30%"
                :before-close="handleClose">
            <div id="tmapDilog_location">
                 <span>经度：{{locationData.lat}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                 <span>纬度：{{locationData.lng}}</span>
            </div>
            <div id="tmapDilog_container"></div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveData()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import {baseServe} from "../../request/api"
    import config from '../../../public/config'
    import { TMap } from './tMap'
    export default {
        name: "tMapDialog",
        data(){
            return{
                //地图对象
                mapObj:null,
                //标注对象
                markObj:null,
                //经纬度缓存
                locationData:{
                    lat:'',
                    lng:''
                }
            }
        },
        props:['showTmapDialog'],
        watch: {
            showTmapDialog:function (nVal) {
                if(nVal){
                    this.initMap()
                }
            }
            //监听prop，获取操作类别
           /* dialogOpType: function(newVal){
                this.optype = newVal;  //newVal即是chartData
            },*/
        },
        mounted() {

        },
        methods:{
            //初始化地图
            initMap(){
                let that = this;
                TMap(config.tMapKey).then(qq => {
                    that.mapObj = new qq.maps.Map(document.getElementById("tmapDilog_container"),{
                        //地图的中心地理坐标
                        center:new qq.maps.LatLng(32.069047,118.797569),
                        zoom:8
                    });
                    qq.maps.event.addListener(that.mapObj, 'click', function(event) {
                        that.locationData.lat = event.latLng.getLat().toFixed(6);
                        that.locationData.lng = event.latLng.getLng().toFixed(6);
                        that.markInTmap(new qq.maps.LatLng( that.locationData.lat,that.locationData.lng))
                    });
                });
            },
            //地图mark标注
            markInTmap(center){
                let that  = this;
                if(this.markObj){
                    this.markObj.setMap(null)
                }
                this.markObj = new qq.maps.Marker({
                    position: center,
                    map: that.mapObj
                })
            },
            //关闭弹窗
            handleClose(){
                this.$parent.showTmapDialog = false;
            },
            //保存数据
            saveData(){
                this.handleClose();
                this.$parent.formLabelAlign.executionPointLatitude = this.locationData.lat;
                this.$parent.formLabelAlign.executionPointLongitude = this.locationData.lng;
            }

        }
    }
</script>

<style>
    @import "../../assets/css/fagl/tmapDialog.css";
</style>
